<template>
  <div class="app-container app-container-compactness">
    <el-form
      ref="form"
      inline-message
      :disabled="editBtnDisabled"
      size="mini"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm page-top"
      :label-position="'left'"
      style="height: 160px;"
    >

      <el-row style="margin-bottom: 1px;" type="flex" justify="space-between">

        <el-button-group>
          <el-form v-if="title=='编辑'" :model="form" style="display: inline-block;">
            <el-button size="mini" type="danger" icon="el-icon-edit" @click="editBtnDisabled = !editBtnDisabled">编辑</el-button>
            <el-button :disabled="editBtnDisabled" style="display: inline-block;margin-left: 0 !important;" size="mini" type="primary" icon="el-icon-folder-checked" @click="submitForm('form')">保存</el-button>
          </el-form>

          <el-button v-if="title != '编辑'" style="display: inline-block;margin-left: 0 !important;" size="mini" type="primary" icon="el-icon-folder-checked" @click="submitForm('form')">保存</el-button>

          <el-form v-if="title=='编辑'" :model="form" style="display: inline-block">
            <el-button size="mini" type="danger" icon="el-icon-printer" @click="prints">打印</el-button>
          </el-form>

        </el-button-group>

      </el-row>

      <!-- <el-row>
        <el-col :span="5">
          <el-form-item v-if="title=='编辑'" label="主单编号" >
            <span>{{ warehousing_id }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="项目和委托方" prop="project_client">
            <el-cascader
              v-model="form.project_client"
              :options="selectData"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="goods_number">
            <span slot="label">
              商品总数量
            </span>
            <el-input v-model="form.goods_number" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="customer_business_number">
            <span slot="label">
              客户业务单号
            </span>
            <el-input v-model="form.customer_business_number" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="货物托盘数量">
            <el-input v-model="form.new_tray_num" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item prop="waybill">
            <span slot="label">
              运单号
            </span>
            <el-input v-model="form.waybill" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="运输方式" prop="transport_type">
            <el-select

              v-model="form.transport_type"
              placeholder="运输方式"
              filterable
              allow-create
              clearable
              size="small"
              style="width: 100%;"
            >
              <el-option label="陆运" value="陆运" />
              <el-option label="海运" value="海运" />
              <el-option label="空运" value="空运" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="clause">
            <span slot="label">
              条款
            </span>
            <el-input  v-model="form.clause" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="货物箱数">
            <el-input  v-model="form.new_box_num" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="货物尺寸">
            <el-input v-model="form.new_goods_dimension" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="货物金额">
            <el-input  v-model="form.new_goods_price" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <div class="SHIPPER" style="width: 260px;">
        <el-form-item class="aaa" label="送货方">
            <el-select v-model="serial_1" value-key="id" @change="change1" clearable filterable placeholder="请选择">
              <el-option
                key="0"
                label=""
                value=""
                disabled>
                <span style="float: left;color: #8492a6;">客户代码</span>
                <span style="float: right; color: #8492a6; font-size: 13px">客户简称</span>
              </el-option>
              <el-option
                v-for="item in clientList"
                :key="item.serial_number"
                :label="`${item.serial_number}（${item.account_key}）`"
                :value="item">
                <span style="float: left">{{ item.serial_number }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account_key }}</span>
              </el-option>
            </el-select>
            <div
              style=" width: 150px"
              v-if="form.shipper_serial_number"
            >
              <div>
                <span>客户名称：</span
                ><span>{{ form.shipper_relation_name }}</span>
              </div>
            </div>
          </el-form-item>
      </div>
        </el-col>
        <el-col :span="5">
          <div class="CONSIGNEE" style="width: 260px;">
        <el-form-item class="aaa" label="收货方">
            <el-select v-model="serial_2" value-key="id" @change="change2" clearable filterable placeholder="请选择">
              <el-option
                key="0"
                label=""
                value=""
                disabled>
                <span style="float: left;color: #8492a6;">客户代码</span>
                <span style="float: right; color: #8492a6; font-size: 13px">客户简称</span>
              </el-option>
              <el-option
                v-for="item in clientList"
                :key="item.serial_number"
                :label="`${item.serial_number}（${item.account_key}）`"
                :value="item">
                <span style="float: left">{{ item.serial_number }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account_key }}</span>
              </el-option>
            </el-select>
            <div
              style="width: 150px"
              v-if="
                form.consignee_serial_number
              "
            >
              <div>
                <span>客户名称：</span
                ><span>{{ form.consignee_relation_name }}</span>
              </div>
            </div>
          </el-form-item>
      </div>
        </el-col>
      </el-row> -->
      <div style="display: flex;">
        <div style="display: flex; flex-direction: column; width: 290px;">
          <el-form-item v-if="title=='编辑'" label="主单编号">
            <span style="font-size: 12px;">{{ warehousing_id }}</span>
          </el-form-item>
          <el-form-item label="项目和委托方" prop="project_client">
            <el-cascader
              v-model="form.project_client"
              :options="selectData"
              style="width: 100%"
              @change="changeProjectClient"
            />
          </el-form-item>

          <el-form-item prop="goods_number">
            <span slot="label">
              商品总数量
            </span>
            <el-input v-model="form.goods_number" />
          </el-form-item>

          <el-form-item prop="batch_no">
        <span slot="label">
          批次号
        </span>
            <el-input v-model="form.batch_no" />
          </el-form-item>

<!--          <el-form-item prop="customer_business_number">-->
<!--            <span slot="label">-->
<!--              客户业务单号-->
<!--            </span>-->
<!--            <el-input v-model="form.customer_business_number" />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="货物托盘数量">-->
<!--            <el-input v-model="form.new_tray_num" />-->
<!--          </el-form-item>-->

<!--          <el-form-item prop="waybill">-->
<!--            <span slot="label">-->
<!--              运单号-->
<!--            </span>-->
<!--            <el-input v-model="form.waybill" />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="货物毛重">-->
<!--            <el-input v-model="form.new_gross_weight" />-->
<!--          </el-form-item>-->
        </div>

        <div style="display: flex; flex-direction: column; width: 279px; ">

<!--          <el-form-item label="运输方式" prop="transport_type">-->
<!--            <el-select-->

<!--              v-model="form.transport_type"-->
<!--              placeholder="运输方式"-->
<!--              filterable-->
<!--              allow-create-->
<!--              clearable-->
<!--              size="small"-->
<!--              style="width: 100%; margin-left: -40px;"-->
<!--            >-->
<!--              <el-option label="陆运" value="陆运" />-->
<!--              <el-option label="海运" value="海运" />-->
<!--              <el-option label="空运" value="空运" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->

<!--          <el-form-item prop="clause">-->
<!--            <span slot="label">-->
<!--              条款-->
<!--            </span>-->
<!--            <el-input v-model="form.clause" style="margin-left: -40px;" />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="货物箱数">-->
<!--            <el-input v-model="form.new_box_num" style="margin-left: -40px;" />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="货物尺寸">-->
<!--            <el-input v-model="form.new_goods_dimension" style="margin-left: -40px;" />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="货物金额">-->
<!--            <el-input v-model="form.new_goods_price" style="margin-left: -40px;" />-->
<!--          </el-form-item>-->

        </div>

        <div class="SHIPPER" style="width: 260px;">
          <el-form-item class="aaa" style="margin-left: -40px" label="送货方">
            <div style="display: inline-block;width:200px;position: relative;left: -50px;" @click="song_click()">
              <el-input v-model="song_value" type="text"  readonly />
            </div>
            <div
              style="position: relative;left: -50px;width: 200px;height:100px;"
            >
                <span>{{ form.shipper_relation_name }}</span>
            </div>
          </el-form-item>
        </div>

        <div class="CONSIGNEE" style="width: 260px;">
          <el-form-item class="aaa" style="margin-left: -40px" label="收货方">
            <div style="display: inline-block;width:200px;position: relative;left: -50px;" @click="shou_click()">
              <el-input v-model="shou_value" type="text"  readonly />
            </div>
            <div
              style="position: relative;left: -50px;width: 200px;height:100px;"
            >
              <span>{{ form.consignee_relation_name }}</span>
            </div>
          </el-form-item>
        </div>

        <el-form-item v-if="false">
          <span slot="label">
            选择库区
          </span>
          <el-cascader
            ref="cascader"
            v-model="warehousing_config_attribute"
            :options="warehousing_config_options"
            :props="warehousing_config_props"
          />
        </el-form-item>
      </div>
    </el-form>

    <el-row class="page-center" style="padding-top: 10px;border-top: 1px solid #DCDFE6;">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="货物信息" name="first">
          <warehousingGoods :_warehousing_id="warehousing_id" :_warehousing_status="warehousing_status" @childEvent="handleChildEvent" @getRow="getRow" @emptyHide="emptyHideFunc" />

        </el-tab-pane>
        <!--        <el-tab-pane label="其他信息" name="second">其他信息</el-tab-pane>-->
      </el-tabs>
    </el-row>

    <el-row v-if="activeName == 'first'" class="page-footer" style="padding-top: -1px;border-top: 1px solid #DCDFE6;">
      <el-tabs :tab-position="tabPosition">
        <el-tab-pane label="货物详细信息">
          <el-empty v-if="clickGoodsForm == null" :image-size="200" />
          <el-row v-else>
            <warehousingGoodsAddEdit :open1.sync="emptyHide" :old_num="row_old_num" :num="sy_num" :warehousing_son_id="warehousing_son_id" :form="clickGoodsForm" :title="title2" />
          </el-row>

        </el-tab-pane>
      </el-tabs>
    </el-row>

    <Print :open-one.sync="openOne" :warehousing_id="warehousing_id" />
    <CustomDialog :visible.sync="dialogVisible" :on-confirm="handleConfirm" :diaclose="diaclose"/>
  </div>

</template>
<script>
import {
  warehousingAdd,
  warehousingEdit,
  getProject,
  get_settlement,
  goodsNumber,
  warehousingDetail, getProjectClientKwList
} from '@/api/storehouse'
import {
  providerList
} from '@/api/basics'
import { att } from '@/api/stock'
import warehousingGoods from '@/views/storehouse/warehousingGoods'
import warehousingGoodsAddEdit from '@/views/storehouse/warehousingGoods/AddEdit'
import Print from '@/views/storehouse/warehousing2/Print'
import CustomDialog from '@/components/CustomDialog/index.vue'
export default {
  name: 'StorehouseWarehousing2AddEdit',
  components: {
    warehousingGoods,
    warehousingGoodsAddEdit,
    Print,
    CustomDialog
  },
  data() {
    const validateOrg = (rule, value, callback) => {
      console.log(this.form.project_client)
      if (!(this.form.project_client instanceof Array)) {
        callback(new Error('项目和委托方不能为空'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      current_click: '',
      shou_value: '',
      song_value: '',
      emptyHide: true,
      sy_num: 0, // 剩余数量
      row_old_num: 0,
      warehousing_son_id: '',
      editBtnDisabled: false,
      open: false,
      openOne: false,
      tabPosition: 'top',
      rules: {
        project_client: [{ type: 'array', required: true, validator: validateOrg }],
        // customer_order_type: [
        //   { required: true, message: '请选择入库类型', trigger: 'change' }
        // ],
        goods_number: [
          { required: true, message: '请输入商品总数量', trigger: 'blur' }
        ]
      },
      selectData: [],
      form: {},
      goods_form: {},
      title: '添加',
      title2: '添加',
      activeName: 'first',
      warehousing_id: false,
      warehousing_status: 1,
      clickGoodsForm: null,
      labelPosition: 'left',
      clientParams: {
        page: 1,
        limit: 9999,
        account_code: undefined,
        account_name: undefined
      },
      clientList: [],
      songhuofangName: [],
      shouhuofangName: [],
      selectList: [],
      serial_1: {},
      serial_2: {},
      warehousing_config_attribute: [],
      warehousing_config_options: [],
      warehousing_config_props: { 'value': 'id', 'label': 'name' }
    }
  },
  watch: {
    'form.project_client': {
      handler(newValue, oldValue) {
        // 库位选择
        if (newValue !== undefined) {
          // const warehousing_id = this.warehousing_id || this.form.warehousing_id
          this.getProjectClientKwListFunc(newValue[1])
        }//
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.project()
    if (this.$route.query.warehousing_id) { // 存在，编辑啊
      console.log(this.$route.query.warehousing_id)
      this.warehousing_id = this.$route.query.warehousing_id
      this.warehousing_status = this.$route.query.status
      // this.form = JSON.parse(this.$route.query._form)
      this.title = '编辑'
      // this.editBtnDisabled = true
      this.getDetail()
    } else {
      // if(window.localStorage.getItem('into_form')){
      //   this.form = JSON.parse(window.localStorage.getItem('into_form'))
      // }
    }
  },
  mounted() {
    // 客户信息列表
    //this.getClientList()
  },
  methods: {
    handleConfirm(val){
      let that = this
      if(that.current_click == 'song'){
        that.song_value = val.account_code + ' ' + val.account_key
        that.form.shipper_serial_number = val.serial_number
        that.form.shipper_relation_name = val.account_name
        that.form.shipper_relation_phone = val.relation_phone
        that.form.shipper_addr = val.addr
      }else if(that.current_click == 'shou'){
        that.shou_value = val.account_code + ' ' + val.account_key
        that.form.consignee_serial_number = val.serial_number
        that.form.consignee_relation_name = val.account_name
        that.form.consignee_relation_phone = val.relation_phone
        that.form.consignee_addr = val.addr
      }
      that.dialogVisible = false
    },
    song_click(){
      console.log('song')
      let that = this
      that.dialogVisible = true
      that.current_click = 'song'
    },
    shou_click(){
      console.log('shou')
      let that = this
      that.dialogVisible = true
      that.current_click = 'shou'
    },
    diaclose(){
      this.dialogVisible = false
    },
    handleChildEvent(data) {
      // 处理子组件触发的事件
      this.getDetail()
    },
    changeProjectClient() {
      this.warehousing_config_attribute = []
      this.$refs.cascader.$refs.panel.clearCheckedNodes()
      this.$refs.cascader.$refs.panel.activePath = []
    },
    getProjectClientKwListFunc(warehousing_id) {
      this.warehousing_config_options = []
      getProjectClientKwList(warehousing_id).then(res => {
        if (res.code === 10000) {
          this.warehousing_config_options = res.data
        }
      })
    },
    getDetail() {
      console.log(this.warehousing_id)
      const params = {
        warehousing_id: this.warehousing_id
      }
      warehousingDetail(params).then((response) => {
        let that = this
        if (response.code == 10000) {
          this.form = response.data[0]
          const arr = [
            response.data[0].project_id,
            response.data[0].project_client
          ]
          this.form.project_client = arr
          this.editBtnDisabled = true
          this.warehousing_config_attribute = this.form.checked_config
          //重置
          let serial_numbers = []
          if(this.form.shipper_serial_number){
            serial_numbers.push(this.form.shipper_serial_number)
            //this.song_value = this.form.account_code + ' ' + this.form.account_key
          }
          if(this.form.consignee_serial_number){
            serial_numbers.push(this.form.consignee_serial_number)
          }
          if(serial_numbers.length > 0){
            providerList({serial_number:serial_numbers}).then(response => {
              let shipper_serial_number = this.form.shipper_serial_number
              let consignee_serial_number = this.form.consignee_serial_number
              response.data.forEach(function (item){
                if(item.serial_number == shipper_serial_number){
                  that.song_value = item.account_code + ' ' + item.account_key
                }
                if(item.serial_number == consignee_serial_number){
                  that.shou_value = item.account_code + ' ' + item.account_key
                }
              })
            })
          }
        }
      })
    },
    change1(e) {
      console.log('eeeee', e, this.serial_1)
      if (e) {
        this.clientList.forEach(item => {
          if (e.id == item.id) {
            this.form.shipper_serial_number = item.serial_number
            this.form.shipper_relation_name = item.account_name
            this.form.shipper_relation_phone = item.relation_phone
            this.form.shipper_addr = item.addr
          }
          console.log(this.form.shipper_serial_number, this.form.shipper_relation_name, this.form.shipper_relation_phone, this.form.shipper_addr)
        })
      } else {
        this.form.shipper_serial_number = ''
        this.form.shipper_relation_name = ''
        this.form.shipper_relation_phone = ''
        this.form.shipper_addr = ''
      }
    },
    change2(e) {
      console.log('eeeee', e)
      if (e) {
        this.clientList.forEach(item => {
          if (e.id == item.id) {
            this.form.consignee_serial_number = item.serial_number
            this.form.consignee_relation_name = item.account_name
            this.form.consignee_relation_phone = item.relation_phone
            this.form.consignee_addr = item.addr
          }
        })
      } else {
        this.form.consignee_serial_number = ''
        this.form.consignee_relation_name = ''
        this.form.consignee_relation_phone = ''
        this.form.consignee_addr = ''
      }
    },
    // 客户信息列表
    getClientList() {
      providerList(this.clientParams).then(response => {
        if (response.code === 10000) {
          this.clientList = response.data
          this.clientList.forEach(item => {
            if (this.form.shipper_serial_number == item.serial_number) {
              this.serial_1 = item
            }
            if (this.form.consignee_serial_number == item.serial_number) {
              this.serial_2 = item
            }
          })
        }
      })
      att().then((response) => {
        if (response.code === 10000) {
          this.selectList = JSON.parse(JSON.stringify(response.data))
        }
      })
    },
    goodsNum() {
      // 商品总数量剩余数
      goodsNumber({ warehousing_id: this.warehousing_id }).then(response => {
        if (response.code === 10000) {
          this.sy_num = response.data.number
        }
      })
    },
    emptyHideFunc(v) {
      this.emptyHide = v
    },
    getRow(v) {
      this.clickGoodsForm = v
      this.title2 = '编辑'
      this.warehousing_son_id = v.id
      this.goodsNum()
      this.row_old_num = v.number
      this.emptyHide = true
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          return false
        }
      })
    },
    add() {
      const that = this
      if (that.form.new_order_date == undefined) {
        var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        that.form.new_order_date = year + '-' + month + '-' + day
      }
      const _data = that.form
      if (this.warehousing_config_attribute === undefined || this.warehousing_config_attribute === '' || (this.warehousing_config_attribute.length === 0)) {
        _data.warehousing_config_attribute = '1,0'
      } else {
        // const _arr = this.warehousing_config_attribute.split(',')
        const attr_1 = this.warehousing_config_attribute[0].replace('_', '')
        const attr2 = this.warehousing_config_attribute[2]
        _data.warehousing_config_attribute = attr_1 + ',' + attr2
      }
      warehousingAdd(_data).then(response => {
        if (response.code === 10000) {
          // window.localStorage.setItem('into_form', JSON.stringify(this.form))
          that.$notify.success(response.message)
          // that.$parent.getList()
          that.warehousing_id = response.data.warehousing_id
          that.title = '编辑'
          that.form.id = response.data.id
          this.$store.dispatch('tagsView/delView', this.$route)
          that.$router.push({
            path: '/storehouse/warehousing2/AddEdit:' + response.data.warehousing_id,
            query: { warehousing_id: response.data.warehousing_id, status: response.data.status, _form: JSON.stringify(response.data) }
          })
          that.getDetail()
          // that.$emit('update:open', false)
        }
      })
    },
    edit() {
      const that = this
      // if (Array.isArray(this.form.project_client) === false) {
      //   this.form.project_client = that.form.project_client
      // } else if (Array.isArray(this.form.project_client) === true) {
      //   this.form.project_id = this.form.project_client[0]
      //   this.form.project_client = this.form.project_client[1]
      // }
      const _data = that.form
      if (this.warehousing_config_attribute === undefined || this.warehousing_config_attribute === '' || (this.warehousing_config_attribute.length === 0)) {
        _data.warehousing_config_attribute = '1,0'
      } else {
        // const _arr = this.warehousing_config_attribute.split(',')
        const attr_1 = this.warehousing_config_attribute[0].replace('_', '')
        const attr2 = this.warehousing_config_attribute[2]
        _data.warehousing_config_attribute = attr_1 + ',' + attr2
      }

      warehousingEdit(_data).then(response => {
        if (response.code === 10000) {
          // window.localStorage.setItem('into_form', JSON.stringify(this.form))
          that.$notify.success(response.message)
          // that.$parent.getList()
          that.$emit('update:open', false)
          console.log(response.data)
          that.$router.push({
            path: '/storehouse/warehousing2/AddEdit:' + response.data.warehousing_id,
            query: { warehousing_id: response.data.warehousing_id, status: response.data.status, _form: JSON.stringify(response.data) }
          })
          that.getDetail()
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:open', false)
    },
    project() {
      const that = this
      getProject().then(response => {
        if (response.code === 10000) {
          that.selectData = response.data
        }
      })
    },
    prints() {
      this.openOne = true
    },
    codeChange() {
      const rest = this.clientList.filter((item) => item.serial_number == this.form.shipper_serial_number)
      if (rest.length != 0) {
        this.form.shipper_relation_name = rest[0].account_name
        this.form.shipper_relation_phone = rest[0].relation_phone
        this.form.shipper_addr = rest[0].addr
      } else {
        this.form.shipper_relation_name = ''
        this.form.shipper_relation_phone = ''
        this.form.shipper_addr = ''
      }
    },
    nameChange() {
      const rest = this.clientList.filter((item) => item.account_name == this.form.shipper_relation_name)
      if (rest.length != 0) {
        this.form.shipper_serial_number = rest[0].serial_number
        this.form.shipper_relation_phone = rest[0].relation_phone
        this.form.shipper_addr = rest[0].addr
        this.form.shipper_serial_number
      } else {
        this.form.shipper_serial_number = ''
        this.form.shipper_relation_phone = ''
        this.form.shipper_addr = ''
      }
    },
    nameShou() {
      const rest = this.clientList.filter((item) => item.serial_number == this.form.consignee_serial_number)
      if (rest.length != 0) {
        console.log(rest, 'rest')
        this.form.consignee_relation_name = rest[0].account_name
        this.form.consignee_relation_phone = rest[0].relation_phone
        this.form.consignee_addr = rest[0].addr || ''
      } else {
        this.form.consignee_relation_name = ''
        this.form.consignee_relation_phone = ''
        this.form.consignee_addr = ''
      }
    },
    nameCh() {
      const rest = this.clientList.filter((item) => item.account_name == this.form.consignee_relation_name)
      if (rest.length != 0) {
        this.form.consignee_serial_number = rest[0].serial_number
        this.form.consignee_relation_phone = rest[0].relation_phone
        this.form.consignee_addr = rest[0].addr
        this.form.consignee_serial_number
      } else {
        this.form.consignee_serial_number = ''
        this.form.consignee_relation_phone = ''
        this.form.consignee_addr = ''
      }
    },
    selectChange(ID) {
      const rest = this.selectList.filter(item => item.config_id == ID)
      if (rest.length != 0) {
        this.form.delivery_addr = rest[0].name
        this.form.delivery_config_name = rest[0].serial_number
      } else {
        this.form.delivery_addr = ''
        this.form.delivery_config_name = ''
      }
    }
  }
}
</script>
<style lang="less" scoped>

 .app-container{
   /deep/ button{
     border-radius: 0;
   }
  /deep/ .el-tabs__header{

   .el-tabs__nav{
     display: flex;
   }

   .el-tabs__item {
     display: flex;
     height: 20.5px;
     line-height: 20.5px;
    }

  }
  ///deep/  .el-tabs__nav .el-tabs__item{
  //  position: absolute;
  //  margin-bottom: -20px;
  //  line-height: 20px;
  //  height: 20px;
  //}

  /deep/ .el-form-item__content{
    width: 150px;
  }
  height: calc(100vh - 80px);
  font-size: 12px !important;
  //padding: 15px 20px;
  /deep/ label{
    font-size: 12px !important;
    font-weight: 700;
  }
  /deep/ .el-button{
    padding: 3px 5px;
    overflow: auto;
    .app-container{
      height: auto;
    }
    /deep/ div{
      font-size: 12px !important;
      line-height: 1 !important;
    }
  }

  .page-top{
    height: calc(30% - 80px);
    overflow: auto;
    .app-container{
      height: auto;
    }
  }
  .page-center{

   /deep/  .el-table__cell {
      height: 25px !important;
    }

    height:  calc(50vh - 120px);
    overflow: auto;
    .app-container{
      height: auto;
    }
    /deep/ div{
      font-size: 12px !important;
    }
  }
  .page-footer{
    height:  calc(50vh - 120px);
    overflow: auto;
    /deep/ div{
      font-size: 12px !important;
    }
    /deep/ .width-ku{
      .el-form-item__content{
        width: auto;
      }
    }
    /deep/ .sp-width{
      .el-form-item__content{
        width: auto;
      }
    }
    /deep/ .el-tabs__header{
      margin-bottom: 2px;
    }
  }

  /deep/ .el-form{
    input{
      font-size: 12px;
      height: 20px;
    }
    .el-form-item--mini.el-form-item{
      margin-bottom: 0;
    }

  }
  /deep/ .el-tabs__item{
    //padding: 0 10px;
    padding-top: 0;
    padding-bottom: 0;
  }
  /deep/ .el-tabs--border-card {
    .el-tabs__content{
      padding: 0;
      .app-container{
        .el-form{
          input{
            font-size: 12px;
            height: 20px;
          }
          .el-form-item{
            margin-bottom: 0 !important;
          }

        }
      }
    }
    .app-container{
      padding: 2px 5px;
    }
  }
  /deep/ .el-table--mini .el-table__cell{
    padding: 0;
    .cell{
      line-height: 1;
    }
  }
  /deep/ .pagination-container{
    padding: 0 !important;
  }
  .el-empty{
    padding-top: 0;
    padding-bottom: 0;
  }
}
/deep/ .aaa input{
  // width:200px !important;
}
.el-col-5 {
  width: 20%;
}
</style>
